<template>
  <div class="history-list">
    <div class="title">{{title}}</div>
    <div class="list-items">
      <div
        v-for="(item, index) in data"
        :key="`history_${index}`"
        class="item"
        @click="onItemSelected(item)">
        {{item.name}}
      </div>
    </div>
    <div class="history-list-clear" v-show="clear && data.length" @click="clearHistory">
        <i class="fdx-icon-delete delete-icon"></i>
        <span class="text">清空{{title}}</span>
    </div>
    <no-result :title='noResultText' v-show="!!data && !data.length" :icon="noResultIcon"></no-result>
  </div>
</template>

<script>
import NoResult from 'base/no-result/no-result'
import { mapActions } from 'vuex'

export default {
  components: {
      NoResult
  },
  props: {
    title: {
      type: String,
      default: '历史记录'
    },
    module: {
      type: String,
      default: 'newHouse'
    },
    clear: {
      type: Boolean,
      default: true
    },
    noResultText: {
      type: String,
      default: '暂无历史记录'
    },
    noResultIcon: {
      type: Boolean,
      default: true
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
    }
  },
  methods: {
    onItemSelected(item) {
      this.$emit('select', item)
    },
    clearHistory() {
      if (!this.module) {
        return
      }
      this.clearHistoryList(this.module)
      Toast('清除成功！')
    },
    ...mapActions(['clearHistoryList'])
  }
}
</script>

<style scoped lang="scss">
  @import "../../assets/sass/_vars";

  .history-list {
    .title {
      padding-left: 12px;
      color: $gray-ccc;
    }

    .list-items {
      .item {
        padding-left: 12px;
        display: flex;
        height: 45px;
        color: $gray-73;
        border-bottom: 1px solid rgba(239,234,235,1);
        align-items: center;

        &:last-child {
          border: none;
        }
      }
    }

    .history-list-clear {
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: $gray-ccc;

      .delete-icon::before {
        font-size: 18px;
      }

      .text {
        padding-left: 5px;
      }
    }
  }
</style>
